<template>
  <div class="">
    <div id="box" class="box"></div>

  </div>
  
</template>

<script>
export default {
  data(){
    return{
    }
  },
  created(){
  },
  mounted(){
    this.$nextTick(()=>{
      this.loadData()
    })
  },
  methods:{
    loadData(){
      var $box = document.getElementById('box');
      setTimeout(() => {
        var shadowRoot = $box.createShadowRoot(); // 获得root
        var children = document.createElement('div');
        children.setAttribute('style', 'height: 40px; width: 40px; background-color: blue');
        shadowRoot.appendChild(children);
      }, 0);
    }
  }
}
</script>

<style>

.box {
			height: 80px;
			width: 80px;
			background-color: red;
		}


</style>